<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本demo">
        <ph-dropdown title="浏览器" :hover="true" type="primary">
          <ph-dropdown-item @action="onAction" action="chrome" icon="chrome"
            >谷歌</ph-dropdown-item
          >
          <ph-dropdown-item @action="onAction" action="firefox" icon="firefox"
            >火狐</ph-dropdown-item
          >
          <ph-dropdown-item @action="onAction" action="safari" icon="safari"
            >苹果</ph-dropdown-item
          >
          <ph-dropdown-item
            @action="onAction"
            action="ie"
            icon="internet-explorer"
            >IE</ph-dropdown-item
          >
        </ph-dropdown>
        <ph-dropdown title="浏览器" type="danger" @action="onAction">
          <ph-dropdown-item action="chrome" icon-right="chrome"
            >谷歌</ph-dropdown-item
          >
          <ph-dropdown-item action="firefox" icon-right="firefox"
            >火狐</ph-dropdown-item
          >
          <ph-dropdown-item action="safari" icon-right="safari"
            >苹果</ph-dropdown-item
          >
          <ph-dropdown-item action="ie" icon-right="internet-explorer"
            >IE</ph-dropdown-item
          >
        </ph-dropdown>
        <ph-dropdown title="浏览器" theme="light" align="left">
          <ph-dropdown-item
            @action="onAction"
            action="chrome"
            icon-right="chrome"
            >谷歌</ph-dropdown-item
          >
          <ph-dropdown-item
            @action="onAction"
            action="firefox"
            icon-right="firefox"
            >火狐</ph-dropdown-item
          >
          <ph-dropdown-item
            @action="onAction"
            action="safari"
            icon-right="safari"
            >苹果</ph-dropdown-item
          >
          <ph-dropdown-item
            @action="onAction"
            action="ie"
            icon-right="internet-explorer"
            >IE</ph-dropdown-item
          >
        </ph-dropdown>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
import { PhDropdown, PhDropdownItem, PhTab, PhTabPanel, PhView } from "@/index";
import * as Data from "../data/dropdown";
export default defineComponent({
  setup() {
    const instance = getCurrentInstance();
    const onAction = (v: string) => {
      instance?.proxy?.$phToast(v);
    };
    return { onAction, ...Data };
  },
  components: { PhDropdown, PhDropdownItem, PhTab, PhTabPanel, PhView },
});
</script>
